Custom and User-Defined Custom Components
Description
A Custom Component or User-defined Custom Component is a way to create a component for reuse. Like Grid or UX Components, custom components are configured using a Component Builder and can be invoked using Action Javascript. Custom Components are an advanced feature for building web and desktop interfaces. Custom Components are not recommended for use in mobile applications.
- Name
- Description
- Custom Components
Two types of reusable web components can be created by any developer with a good knowledge of Xbasic, HTML, and JavaScript. One type is the Custom Component, discussed in this article and those following. The other is the User-defined Component, which is both more flexible and harder to develop. We recommend starting by creating a Custom Component even if your ultimate goal is to develop a User-defined Component.
- Creating a Custom Component
Creating a custom component involves four steps.
- Custom Component Sections and Events
Let's go over the Sections and Events of the Custom Component Builder.
- Using the Custom Component JavaScript Class
How to make an Ajax callback and maintain state across HTTP calls.
- Sharing and Using a Custom Component
Once you have a working custom component, you can share it with others by sending them the .A5WCMP file that contains the component. They will need to copy it into their web project folder to use it. If your component uses Xbasic functions in an AEX file, or your component uses CSS or JavaScript files, you will need to supply those files as well.
- User-defined Components
A User-defined Component is the more flexible big brother of a Custom Component. Like a Custom Component, a User-defined Component can be opened in a window, a DIV, or a Tabbed UI Pane, in a linked content section of a Grid, and in a row expander of a Grid. Like a Custom Component, a User-defined Component has bindable arguments.
- When to turn a Custom Component into a User-defined Component
In addition to the bindable arguments of a Custom Component, a User-defined Component has properties and supports having property grids for user input. Bindable properties make it possible to bind data to exposed properties programmatically, which in turn makes it possible to send the User-defined Component arrays of data or data generated from Xbasic expressions. Property grids, used widely in Alpha Anywhere and prominent as the control panel for grid creation, make setting up the User-defined Component a matter of a few mouse clicks.
- Creating a User-defined Component
Follow these steps to create a User-defined Component.
- Creating a Property Grid for a User-defined Component
One way to create a Property Grid for a User-defined Component is to use the Property Grid builder in Action Scripting to generate the markup. This is invoked by creating a New Script (using Action Scripting), adding a new action, and selecting Xdialog Windows|Display an Xdialog Box.
- Sharing and Using a User-defined Component
Once you have a working User-defined Component, you can share it with others by sending them a Zip of the entire directory tree you used to create the User-defined Component builder. They will need to unpack it into their C:\Users\<userName>\AppData\Roaming\AlphaSoftware\AlphaAnywhere\<identifier>\UserDefinedWebComponentTypes directory, which they can find by using the Edit|Advanced|Open Folder where User-defined Components are Registered menu item from Alpha Anywhere.